<template>
  <a-modal
    title="房間選擇"
    :width="600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-row :gutter="24">
      <a-col :md="24" :sm="24" class="state_item_context">
        <a-card :bordered="false" class="header-card">
          <a-row :gutter="24" v-for="(item, index) in itemList" :key="index">
            <div class="room_item_lis">
              <a-checkbox
                  class="bt-tt"
                  @click="checkBoxCheck(item.id, 1)"
                  :class="item.checked ? 'check_box_active' : 'check_box'"
                  :checked="item.checked"
                >
                  {{ item.name }}
                </a-checkbox>
            </div>
            <div class="room_item_lis room_item_lis_sec">
              <a-checkbox
                v-for="(i, index) in item.children"
                :key="index"
                class="bt-tt"
                @click="checkBoxCheck(i.id, 2)"
                :class="i.checked ? 'check_box_active' : 'check_box'"
                :checked="i.checked"
              >
                {{ i.name }}
              </a-checkbox>
            </div>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
import { busCostIncomeExpensesList } from '@/api/modular/main/buscostincomeexpenses/busCostIncomeExpensesManage'
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      simpleListitemActive: -1,
      data: [],
      itemList: [],
      selectedList: [],
      itemChecked: 1,
      itemCheckedName: '',
      roomStrName: '',
      type: 0,
       // 表头
      columns: [
          {
            title: '名称',
            align: 'left',
            dataIndex: 'name'
          },
          {
            title: '级别',
            align: 'left',
            dataIndex: 'level',
            scopedSlots: { customRender: 'level' }
          }
      ],
      tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
      selectedRowKeys: [],
      selectedRows: [],
      levelDict: [ { 'value': '一級類別', 'code': '1' }, { 'value': '二級類別', 'code': '2' } ]
    }
  },
  methods: {
    // 初始化方法
    select(data, type) {
      this.data = data
      this.visible = true
      this.type = type
      this.getAllStateList()
    },
    stateListitemActive(id, name, category) {
      this.simpleListitemActive = id
      this.getAllStateRoomList(id, name, category)
    },
    checkBoxCheck(id, level) {
      if (level === 1) {
        const newData = [...this.itemList]
        const target = newData.find(item => id === item.id)
        if (target) {
          target['checked'] = !target['checked']
          this.itemList = newData
        }
      } else {
        const newData = [...this.itemList]
        const alllen = newData.length
        for (var i = 0; i < alllen; i++) {
           const target = newData[i].children.find(item => id === item.id)
           if (target) {
              target['checked'] = !target['checked']
              break
            }
        }
        this.itemList = newData
      }
    },
    getAllStateList() {
      busCostIncomeExpensesList({ type: this.type }).then((res) => {
          if (res.code === 200) {
            const newData = res.data
            const alllen = newData.length
            for (var i = 0; i < alllen; i++) {
              const target = this.data.find(item => newData[i].id + '' === item.rentAmountCategory)
              if (target) {
                newData[i].checked = true
              }
              const chllen = newData[i].children
              if (chllen) {
                const chllenLen = chllen.length
                for (var ic = 0; ic < chllenLen; ic++) {
                  const targetC = this.data.find(item => chllen[ic].id + '' === item.rentAmountCategory)
                  if (targetC) {
                    newData[i].children[ic].checked = true
                  }
                }
              }
            }
            this.itemList = newData
          }
        }).finally(() => {
          this.loading = false
        })
    },
    /**
     * 提交表单
     */
    handleSubmit() {
      const alllen = this.itemList.length
      for (var i = 0; i < alllen; i++) {
        if (this.itemList[i].checked) {
          this.selectedList.push({ rentAmountCategory: this.itemList[i].id, rentAmountName: this.itemList[i].name, amount: 0 })
        }
        const chllen = this.itemList[i].children
        if (chllen) {
          const chllenLen = chllen.length
           for (var ic = 0; ic < chllenLen; ic++) {
            if (chllen[ic].checked) {
              this.selectedList.push({ rentAmountCategory: chllen[ic].id, rentAmountName: chllen[ic].name, amount: 0 })
            }
          }
        }
      }
      this.$emit('ok', this.selectedList, this.type)
      this.handleCancel()
    },
    handleCancel() {
      this.visible = false
      this.simpleListitemActive = -1
      this.data = []
      this.itemList = []
      this.itemChecked = 0
      this.itemCheckedName = ''
      this.roomStrName = ''
      this.type = 0
      this.selectedList = []
    }
  }
}
</script>

<style lang="less">
.ant-modal-body {
  padding: 6px;
}
.state_context {
  height: 600px;
  .scrll_list {
    height: 100%;
    overflow-y: auto;
    .simple_list_item {
      border-bottom: 0px;
      padding: 0px;
      .state_list {
        width: 100%;
        .ant-card-body {
          padding: 6px 10px;
        }
      }
    }
    .simple_list_item_active {
      border-left: solid 4px rgb(17, 81, 117);
      color: rgb(17, 81, 117);
      background-color: rgb(180, 220, 243);
    }
  }
  .scrll_list::-webkit-scrollbar {
    width: 8px;
  }
  .scrll_list::-webkit-scrollbar-track {
    background-color: rgb(250, 241, 241);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  .scrll_list::-webkit-scrollbar-thumb {
    background-color: rgb(205, 209, 205);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
}
.state_item_context{
  .header-card{
    .ant-card-body{
      padding: 0px;
    }
    .room_item_lis{
      padding:6px 10px;
      .bt-tt{
        padding: 10px;
        margin-left: 8px;
        margin-bottom: 8px;
      }
      .check_box{
        border: solid 1px rgb(241, 238, 238);
      }
      .check_box_active{
        border: solid 1px rgb(109, 185, 236);
      }
    }
    .room_item_lis_sec{
      padding:6px 40px;
    }
  }

}
</style>
